<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">在习生/毕业生</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入姓名或手机号"
            style="width: 150px"
            class="className"
          ></el-input>
             <el-input
            v-model="classSearchInput1"
            placeholder="请输入学校名称"
            style="width: 150px"
            class="className"
          ></el-input>
          <div style="position: relative">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <img src="../../assets/images/back.png" class="addmsg1" @click="getback">
          <img src="../../assets/images/加号.png" class="addmsg" @click="handleAdd" />
        </div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="studentName" label="姓名" align="center" :min-width="80" />
        <el-table-column prop="sex" label="性别" align="center" :min-width="60" />
        <el-table-column prop="className" label="班级" align="center" :min-width="230" />
        <el-table-column prop="graduationDate" label="毕业日期" align="center" :min-width="110" />
        <el-table-column prop="tel" label="电话" align="center" :min-width="120"/>
        <el-table-column prop="tel" label="销售顾问" align="center" :min-width="80">
          <template #default="scope">
            {{ scope.row.saleName ? scope.row.saleName : '管理员' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" :min-width="80">
          <template #default="scope">
            <div :style="{ color: getStatusColor(scope.row.status) }">
              {{ getStatusText(scope.row.status) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" :min-width="160">
          <template #default="scoped">
            <el-button link type="success" @click="() => handleEdit(scoped.row)">修改</el-button>
            <el-button link type="danger" @click="del(scoped.row)" class="details1">删除</el-button>
            <el-button link type="primary" @click="() => handleDetails(scoped.row)" class="details1">详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
        </div>
      </div>
    </div>

    <!-- 添加在习生 -->
    <el-dialog v-model="dialogVisible" title="添加在习生" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="班级" prop="className">
            <el-select v-model="formData.className" placeholder="请选择班级" @change="classChange">
              <el-option
                v-for="item in classList"
                :key="item.classId"
                :label="item.className"
                :value="item.className"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业日期" prop="graduationDate">
            <el-date-picker
              v-model="formData.graduationDate"
              type="date"
              placeholder="请选择毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入电话"/>
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入家庭地址"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData.account" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData.major" placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData.remarks"
             :autosize="{ minRows: 2, maxRows: 4 }"
              resize="none"
              style="width: 500px"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
    <!-- 修改在习生 -->
    <el-dialog v-model="dialogVisible2" title="修改预招生" width="400px" :show-close="false" style="margin-top:30px">
      <el-form
        :model="formData2"
        :rules="rules2"
        ref="formRef2"
        label-width="120px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="formData2.studentName" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="班级" prop="className">
            <el-select v-model="formData2.className" @change="classChange1">
              <el-option
                v-for="item in classList"
                :key="item.classId"
                :label="item.className"
                :value="item.className"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData2.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业日期" prop="graduationDate">
            <el-date-picker
              v-model="formData2.graduationDate"
              type="date"
              placeholder="请选择预毕业日期"
              style="width: 200px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData2.tel"  placeholder="请输入电话"/>
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="formData2.address" placeholder="请输入家庭地址" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="紧急联系人" prop="emContact">
            <el-input v-model="formData2.emContact" placeholder="请输入紧急联系人" />
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emTel">
            <el-input v-model="formData2.emTel" placeholder="请输入紧急联系人电话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData2.account" disabled />
          </el-form-item>
          <el-form-item label="学校和专业" prop="major">
            <el-input v-model="formData2.major" placeholder="请输入学校和专业" />
          </el-form-item>
        </el-row>
        <el-row v-if="formData2.remarks">
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
              :disabled="!!formData2.remarks"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="formData2.remarks ? '新增备注' : '备注'" prop="remarks">
            <el-input
              type="textarea"
              v-model="formData2.remarks1"
              autosize
              resize="none"
              style="width: 500px; white-space: pre-line"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible2 = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleEdit1" class="confirm">修改</el-button>
      </template>
    </el-dialog>
    <!-- 在习生详情 -->
    <el-drawer
      v-model="dialogVisible3"
      title="在习生详情"
      size="700"
      :show-close="false"
      style="background-color: #f0f8ff"
    >
      <el-row>
        <el-col :span="12">姓名：{{ formData3.studentName }}</el-col>
        <el-col :span="12">班级：{{ formData3.className }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">性别：{{ formData3.sex }}</el-col>
        <el-col :span="12">毕业日期：{{ formData3.graduationDate }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">电话：{{ formData3.tel }}</el-col>
        <el-col :span="12">学校和专业：{{ formData3.major }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">紧急联系人：{{ formData3.emContact }}</el-col>
        <el-col :span="12">紧急联系人电话：{{ formData3.emTel }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">账号：{{ formData3.account }}</el-col>
        <el-col :span="12">销售顾问：{{ formData3.saleName ?  formData3.saleName : '管理员' }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">家庭地址：{{ formData3.address }}</el-col>
      </el-row>
      <el-row style="display: flex">
        <el-col :span="2">备注：</el-col>
        <el-col :span="22" class="content2">{{ formData3.remarks }}</el-col>
      </el-row>

      <template #footer>
        <el-button @click="dialogVisible3 = false" class="cancel">关闭</el-button>
      </template>
    </el-drawer>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getGraduate,
  modifyGraduate,
  getClass,
  addGraduate,
  deleteGraduate,
  getStudentById,
  getClassById,
} from '@/components/api/Graduate'
const total = ref(0) // 总条数
const pageSize = ref(7) // 每页显示条数
const currentPage = ref(1) // 当前页码
const tableData = ref([]) //表格数据
const classSearchInput = ref('') //搜索框输入的值
const classSearchInput1 = ref('') //搜索框输入的值
const classList = ref([]) // 班级列表
//本地存储
const user = JSON.parse(localStorage.getItem('user'))
//获取学生列表
async function getStudent(pageIndex, pageSize, search) {
  let data = {
    pageIndex,
    pageSize,
    search,
  }
  if(classSearchInput1.value){
    data.major = classSearchInput1.value
  }
  const inputValue = search.trim();
  const isPhoneNumber = /^\d+$/.test(inputValue);
  if (isPhoneNumber) {
    data.tel = inputValue;
    data.search = '';
  }else{
    data.search = inputValue;
  }
  if (user.roleId == '5') {
    data.userId = user.userId
  }
  let res = await getGraduate('studentList2', data)
  if (res.code == 200) {
    total.value = res.dataset.pageCount * pageSize // 总条数
    tableData.value = res.dataset.studentList // 数据列表
  }
}
//获取班级列表
function getClassList() {
  getClass('classList2', {}).then((res) => {
    classList.value = res.dataset // 班级列表
  })
}
//获取数据
onMounted(() => {
  //添加类名
  document.querySelector('.one').classList.add('oneafter')
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
  getClassList()
})

//当前页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

const handleSearch = async () => {
  // 搜索逻辑
  currentPage.value = 1
  await getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

//通过班级id获取班级信息接口
async function getClassMsg(id) {
  let data = {
    classId: id,
  }
  let res = await getClassById('ClassById', data)
  if (res.code == 200) {
    formData.value.graduationDate = res.dataset.endTime // 班级名称
  }
}
async function getClassMsg1(id) {
  let data = {
    classId: id,
  }
  let res = await getClassById('ClassById', data)
  if (res.code == 200) {
    formData2.value.graduationDate = res.dataset.endTime // 班级名称
  }
}

//班级改变
function classChange(val) {
  //拿到班级id
  const classId = classList.value.find((item) => item.className == val).classId
  getClassMsg(classId)
}

//修改班级的时候
function classChange1(val) {
  //拿到班级id

  const classId = classList.value.find((item) => item.className == val).classId
  getClassMsg1(classId)
}

//获取颜色
const getStatusColor = (status) => {
  if (status == '2') {
    return 'green'
  } else {
    return 'red'
  }
}
//获取状态
const getStatusText = (status) => {
  if (status == '2') {
    return '已毕业'
  } else {
    return '未毕业'
  }
}

// 添加在习生模态框
// 新增：模态框显示状态
const dialogVisible = ref(false)
// 新增：表单数据
const formData = ref({
  studentName: '',
  className: '',
  sex: '',
  graduationDate: '',
  tel: '',
  emContact: '',
  emTel: '',
  account: '',
  address: '',
  classId: '',
  major: '',
  remarks: '',
})
// 新增：表单引用
const formRef = ref(null)
// 新增：表单验证规则
const rules = ref({
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  className: [{ required: true, message: '请输入班级', trigger: 'blur' }],
  graduationDate: [{ required: true, message: '请选择预毕业日期', trigger: 'change' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  emTel: [
    {
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
})

// 新增：点击添加在习生按钮方法
const handleAdd = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  dialogVisible.value = true
}

// 新增：点击确认按钮方法
const handleConfirm = () => {
  // 提交表单逻辑
  formRef.value.validate((valid) => {
    if (valid) {
      //拿到classId
      const classId = classList.value.find(
        (item) => item.className == formData.value.className
      ).classId
      // //修改formData
      formData.value.classId = classId
      const data = {
        studentName: formData.value.studentName,
        className: formData.value.className,
        classId: formData.value.classId,
        sex: formData.value.sex,
        graduationDate: formData.value.graduationDate,
        tel: formData.value.tel,
        account: formData.value.account,
        major: formData.value.major,
      }
      if(formData.value.emContact){
        data.emContact = formData.value.emContact
      }
      if(formData.value.emTel){
        data.emTel = formData.value.emTel
      }
      if(formData.value.address){
        data.address = formData.value.address
      }
      if(formData.value.remarks){
        data.remarks = formData.value.remarks
      }
      if (user.roleId == '5') {
        data.saleId = user.userId
      }
      addGraduate('addStudent', data)
        .then((res) => {
          if (res && res.code === 200) {
            ElMessage.success('添加成功')
            dialogVisible.value = false
            getStudent(currentPage.value, pageSize.value, classSearchInput.value)
          } else {
            ElMessage.error('添加失败，账号或手机重复')
          }
        })
        .catch((error) => {
          console.error('添加学生请求出错:', error)
          ElMessage.error('添加失败，请稍后重试')
          dialogVisible.value = false
        })
    }
  })
}

// 修改在习生模态框
// 修改：模态框显示状态
const dialogVisible2 = ref(false)
// 修改：表单数据
const formData2 = ref({
  studentName: '',
  className: '',
  sex: '',
  graduationDate: '',
  tel: '',
  emContact: '',
  emTel: '',
  account: '',
  password: '',
  address: '',
  classId: '',
  major: '',
  remarks: '',
  remarks1: '',
})
// 修改：表单引用
const formRef2 = ref(null)
// 修改：表单验证规则
const rules2 = ref({
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  className: [{ required: true, message: '请输入班级', trigger: 'blur' }],
  graduationDate: [{ required: true, message: '请选择预毕业日期', trigger: 'change' }],
  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  emTel: [
    {
      validator: (rule, value, callback) => {
        if (value && !/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  // emContact: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }],
  // emTel: [{ required: true, message: '请输入紧急联系人电话', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  // address: [{ required: true, message: '请输入家庭地址', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  major: [{ required: true, message: '请输入学校和专业', trigger: 'blur' }],
})
const oldformData2 = ref({})
// 修改：点击修改按钮方法
const handleEdit = (row) => {
  // 重置表单验证状态
  if (formRef2.value) {
    formRef2.value.clearValidate()
  }
  getStudentById('studentById', { studentId: row.studentId }).then((res) => {
    formData2.value = { ...res.dataset }
    oldformData2.value = JSON.parse(JSON.stringify(res.dataset));
  })
  dialogVisible2.value = true
}

// 修改：点击确认按钮方法
const handleEdit1 = () => {
  //验证表单
  formRef2.value.validate((valid) => {
    if (valid) {
      //拿到classId
      const classId = classList.value.find(
        (item) => item.className == formData2.value.className
      ).classId

      // //修改formData2
      formData2.value.classId = classId
      const data = {
        studentId: formData2.value.studentId,
        studentName: formData2.value.studentName,
        className: formData2.value.className,
        classId: formData2.value.classId,
        graduationDate: formData2.value.graduationDate,
        account: formData2.value.account,
        major: formData2.value.major,
        emContact: formData2.value.emContact,
        emTel: formData2.value.emTel,
        address: formData2.value.address,
      }
      if(formData2.value.tel != oldformData2.value.tel){
        data.tel = formData2.value.tel
        ElMessage.success(`手机号已修改，账号更新为：stu_${formData2.value.tel}，密码已重置为123456`);
      }
      if(formData2.value.remarks1){
        data.remarks = formData2.value.remarks + '\n' + formData2.value.remarks1;
      }else{
        data.remarks = formData2.value.remarks;
      }
      modifyGraduate('updateStudent', data).then((res) => {
        ElMessage.success('修改成功')
        dialogVisible2.value = false
        getStudent(currentPage.value, pageSize.value, classSearchInput.value)
      })
    }
  })
}

// 删除
function del(row) {
  // 弹出确认框
  ElMessageBox.confirm('确定删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // 执行删除操作
      const data = {
        studentId: row.studentId,
      }
      deleteGraduate('deleteStudent', data).then((res) => {
        ElMessage.success('删除成功')
        getStudent(currentPage.value, pageSize.value, classSearchInput.value)
      })
    })
    .catch(() => {
      // 用户取消删除操作
      ElMessage.info('已取消删除操作')
      getStudent(currentPage.value, pageSize.value, classSearchInput.value)
    })
}

// 详情
// 详情：模态框显示状态
const dialogVisible3 = ref(false)
// 详情：表单数据
const formData3 = ref({})
// 详情：表单引用
const formRef3 = ref(null)
// 详情：点击详情按钮方法
const handleDetails = (row) => {
  //清空表单
  formData3.value = {}
  // 填充表单数据
  getStudentById('studentById', { studentId: row.studentId }).then((res) => {
    formData3.value = { ...res.dataset }
  })
  dialogVisible3.value = true
}
function getback() {
  window.history.go(-1)
}


function handleChange(){
  currentPage.value = 1
  getStudent(currentPage.value, pageSize.value, classSearchInput.value)
}

</script>
  
  <style scoped>
.addmsg1 {
  width: 25px;
  height: 25px;
  margin-right: 20px;
  cursor: pointer;
}
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
.line2 {
  width: 10px;
  height: 2px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #9b9b9b;
}
:deep(.className .el-input__wrapper) {
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.addmsg {
  width: 25px;
  height: 25px;
}

/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}

/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;

}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}

/* 详情 */
.el-form-item .detail-content {
  display: inline-block;
  width: 200px; /* 假设输入框宽度为 200px，可根据实际情况调整 */
  vertical-align: middle;
}
.detail-content1 {
  display: inline-block;
  width: 600px;
  max-height: 100px;
  overflow-y: auto;
  white-space: pre-line;
  word-break: break-all;
}
:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
}

:deep(.el-drawer__header span) {
  text-align: center;
  color: black;
  font-size: 20px;
}
:deep(.el-drawer .el-drawer__body .el-row) {
  margin-top: 15px !important;
}
.content2 {
  width: 550px;
  height: 290px;
  overflow-y: auto;
  white-space: pre-line;
  word-break: break-all;
}
:deep(.el-drawer header) {
  background-color: #0f6ab1;
  margin-bottom: 0;
  padding-bottom: 20px;
}
:deep(.el-drawer header span) {
  color: white;
}

:deep(.el-drawer__header span) {
  text-align: center;
  color: black;
  font-size: 20px;
}
.footer {
  padding-top: 20px;
  text-align: right;
}
.footer button {
  background-color: #0f6ab1;
  color: white;
  margin-right: 20px;
}
.footer button:hover {
  background-color: #054a80;
  color: white;
}
:deep(.el-textarea__inner) {
  min-height: 50px !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}
</style>